<template>
  <div>
    <el-row type="flex" justify="space-between" style="margin-bottom:20px;">
      <div style="display:flex;">
        <el-input
          placeholder="搜索任务名称"
          style="width:150px;margin-right:20px"
          v-model="search_orgname"
          clearable
        ></el-input>
        <el-select v-model="selectlevel" style="margin-right:20px">
          <el-option
            v-for="(item,index) in leveloption"
            :key="index"
            :label="item.hash.code_name"
            :value="item.hash.code_id"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="starttime"
          style="margin-right:20px;padding-right: 30px;"
          type="daterange"
          rangeSeparator="至"
          startPlaceholder="创建时间"
          endPlaceholder="创建时间"
          valueFormat="yyyy-MM-dd"
          clearable
          @change="pickerchange1"
        ></el-date-picker>
        <el-date-picker
          v-model="finishtime"
          style="margin-right:20px;padding-right: 30px;"
          type="daterange"
          rangeSeparator="至"
          startPlaceholder="预计完成时间"
          endPlaceholder="预计完成时间"
          valueFormat="yyyy-MM-dd"
          clearable
          @change="pickerchange2"
        ></el-date-picker>
        <el-button type="primary" size="mini" @click="getallsplList">搜索</el-button>
      </div>
      <el-button type="primary" size="mini" @click="addtask" v-if="addtasks=='1'">添加任务</el-button>
    </el-row>
    <div class="collect" v-for="(item,index) in listdata" :key="index">
      <div class="left">
        <div class="title">{{item.hash.taskname}}</div>
        <p class="p1">{{item.hash.context}}</p>
        <p>发布人：{{item.hash.createusername}}</p>
        <p>负责人：{{item.hash.chargers}}</p>
        <p>抄送人：{{item.hash.noticers}}</p>
      </div>
      <div class="right">
        <div class="title">{{item.hash.status=='1'? '已完成' : '未完成'}}</div>
        <p>
          发布时间：
          <span style="display:inline-block;width:150px">{{item.hash.createdate}}</span>
        </p>
        <p>
          预计时间：
          <span style="display:inline-block;width:150px">{{item.hash.taskdate}}</span>
        </p>
        <p>
          完成时间：
          <span style="display:inline-block;width:150px">{{item.hash.finishdate}}</span>
        </p>
        <div>
          <el-button type="primary" size="mini" @click="viewdetail(item.hash)">查看详情</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="finishtask(item.hash.taskid)"
            v-if="finishclick=='1'&&item.hash.notfinish=='1'"
          >点击完成</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="添加任务" :visible.sync="dialogaddtask" v-if="showtask" :beforeClose="handleClose">
      <div class="content">
        <el-form :model="taskform" :rules="rules" ref="ruleForm" labelWidth="100px">
          <el-form-item label="任务描述" prop="taskname">
            <el-input v-model="taskform.taskname"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="region1">
            <el-select v-model="taskform.region1" placeholder="请选择" multiple collapseTags>
              <el-option :value="mineStatusValue1" style="height: auto">
                <el-tree
                  :data="arr"
                  showCheckbox
                  nodeKey="id"
                  ref="tree1"
                  highlightCurrent
                  :props="defaultProps1"
                  @check-change="handleCheckChange1"
                ></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抄送" prop="region2">
            <el-select v-model="taskform.region2" placeholder="请选择" multiple collapseTags>
              <el-option :value="mineStatusValue2" style="height: auto">
                <el-tree
                  :data="arr"
                  showCheckbox
                  nodeKey="id"
                  ref="tree2"
                  highlightCurrent
                  :props="defaultProps2"
                  @check-change="handleCheckChange2"
                ></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重要级别">
            <el-radio-group v-model="taskform.tasklevel">
              <el-radio-button
                v-for="(item,index) in radiolist"
                :key="index"
                :label="item.hash.code_id"
              >{{item.hash.code_name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预计完成时间">
            <el-date-picker
              v-model="taskform.taskdate"
              type="date"
              valueFormat="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="任务详情" prop="context">
            <el-input type="textarea" v-model="taskform.context"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot">
        <el-button type="primary" size="mini" @click="tasksave('ruleForm')">发起</el-button>
        <el-button size="mini" @click="taskcancel">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看详情" :visible.sync="dialogviewdetail">
      <div class="content">
        <el-row class="xq_row" type="flex" justify="space-between">
          <div>
            <p>任务描述：{{this.xiangqlist.taskname}}</p>
            <p>发布人：{{this.xiangqlist.createusername}}</p>
            <p>负责人：{{this.xiangqlist.chargers}}</p>
            <p>重要级别：{{this.xiangqlist.tasklevelname}}</p>
            <p>完成状态：{{this.xiangqlist.status=='1'? '已完成' : '未完成'}}</p>
            <p>任务详情：{{this.xiangqlist.context}}</p>
          </div>
          <div>
            <p>发布时间：{{this.xiangqlist.createdate}}</p>
            <p>抄送：{{this.xiangqlist.noticers}}</p>
            <p>预计完成时间：{{this.xiangqlist.taskdate}}</p>
            <p>完成时间：{{this.xiangqlist.finishdate}}</p>
          </div>
        </el-row>
        <div class="chatbox">
          <div v-for="(item,index) in liuyanlist" :key="index">
            <div class="chat" v-if="item.hash.type==1">
              <p>{{item.hash.username}}：{{item.hash.tousername==''? item.hash.tousername : "@"+item.hash.tousername }} {{item.hash.context}}</p>
              <p class="tr">{{item.hash.createdate}}</p>
            </div>
            <el-divider
              class="tc"
              v-else
            >{{item.hash.username}} {{item.hash.context}} {{item.hash.createdate}}</el-divider>
          </div>
          <div class="textbox">
            <el-form labelWidth="80px">
              <el-form-item label="@指定人">
                <el-select v-model="name" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in mineStatusValue3"
                    :key="index"
                    :label="item.hash.username"
                    :value="item.hash.userid"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="textarea" type="textarea"></el-input>
                <el-button
                  style="float:right;margin-top:10px"
                  type="primary"
                  size="mini"
                  @click="sendliuyan"
                >发送</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['addtasks', 'finishclick', 'token'],
  data() {
    return {
      ts: this.newStore(),
      starttime: [],
      finishtime: [],
      search_orgname: '',
      dialogaddtask: false,
      dialogviewdetail: false,
      taskform: {
        taskname: '',
        region1: '',
        region2: '',
        radio: '',
        taskdate: '',
        context: '',
        tasklevel: '',
      },
      rules: {
        taskname: [
          { required: true, message: '请填写任务描述', trigger: 'blur' },
        ],
        region1: [
          { required: true, message: '请选择负责人', trigger: 'blur' },
        ],
        context: [
          { required: true, message: '请填写任务详情', trigger: 'blur' },
        ],
      },
      radiolist: [],
      planperson1: [],
      planperson2: [],
      planperson3: [],
      mineStatusValue1: [],
      mineStatusValue2: [],
      mineStatusValue3: [],
      name: '',
      textarea: '',
      defaultProps1: {
        children: 'children',
        label: 'label',
      },
      defaultProps2: {
        children: 'children',
        label: 'label',
      },
      defaultProps3: {
        children: 'children',
        label: 'label',
      },
      arr: [],
      listdata: {},
      liuyanlist: [],
      xiangqlist: [],
      selectlevel: '',
      leveloption: [],
      showtask: false,
    };
  },
  created() {
    this.getTree();
    this.getListData();
    this.getjibielist();
  },
  methods: {
    reload(partsname) {
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    getListData() {
      const req = {
        handle: '1FA998754EC78E7DD6F3513F0FEA536D012084477059BDA5',
        query: this.search_orgname,
        tasklevel: this.selectlevel,
        createdate_begin: this.starttime[0],
        createdate_end: this.starttime[1],
        taskdate_begin: this.finishtime[0],
        taskdate_end: this.finishtime[1],
        createuser: this.addtasks == '1' ? localStorage.getItem('pid') : '',
        chargeruser: this.token == '1' ? localStorage.getItem('pid') : '',
        noticeruser: this.token == '2' ? localStorage.getItem('pid') : '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.listdata = ts.d.data.operation1;
        }
      });
    },
    getallsplList() {
      this.getListData();
    },
    addtask() {
      this.taskform = {
        taskname: '',
        region1: '',
        region2: '',
        radio: '',
        taskdate: '',
        context: '',
        tasklevel: '',
      };
      this.showtask = false;
      this.reload('showtask');
      this.dialogaddtask = true;
      // this.$nextTick(() => {
      //   this.$refs.ruleForm.resetFields();
      // });
    },
    getf_userlist(id) {
      const req = {
        handle:
          '1FA998754EC78E7D578A3E9390AE65D1BC393F9F870D1179F85AA142B979BA49',
        taskid: id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.mineStatusValue3 = ts.d.data.operation1;
        }
      });
    },
    viewdetail(item) {
      this.xiangqlist = item;
      const req = {
        handle: '1FA998754EC78E7DD6F3513F0FEA536DCB307DE5BC55A6BB',
        taskid: item.taskid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.liuyanlist = ts.d.data.operation4.reverse();
        }
      });
      this.dialogviewdetail = true;
      this.getf_userlist(item.taskid);
    },
    handleCheckChange1(data, checked, indeterminate) {
      const res = this.$refs.tree1.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      const tt = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arr.push(item);
        tt.push(item.id);
      });
      // console.log(arr,'1')
      // console.log(arrLabel,'2')
      this.mineStatusValue1 = arr;
      this.planperson1 = tt;
      this.taskform.region1 = arrLabel;
      if (arr.length > 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    handleCheckChange2(data, checked, indeterminate) {
      const res = this.$refs.tree2.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      const tt = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arr.push(item);
        tt.push(item.id);
      });
      // console.log(arr,'1')
      // console.log(arrLabel,'2')
      this.mineStatusValue2 = arr;
      this.planperson2 = tt;
      this.taskform.region2 = arrLabel;
      if (arr.length > 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    // 完成任务
    finishtask(id) {
      this.$confirm('确认该任务已完成？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const req = {
          handle: '1FA998754EC78E7D76632EE4B0FC49B0A45297D7C6B18BC5',
          taskid: id,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.sflag == 'success') {
          // this.radiolist=ts.d.data.operation1
            this.getListData();
          }
        });
      });
    },
    // 获取重要级别
    getjibielist() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0507',
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.radiolist = ts.d.data.operation1;
          this.leveloption = ts.d.data.operation1;
        }
      });
    },
    // 保存任务
    tasksave(formName) {
      const req = {
        handle: '1FA998754EC78E7D4E95A8D2219E38CB1371440F534AD2F0',
        taskname: this.taskform.taskname,
        tasklevel: this.taskform.tasklevel,
        taskdate: this.taskform.taskdate,
        context: this.taskform.context,
        charger: this.planperson1,
        noticer: this.planperson2,
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.dialogaddtask = false;
              this.getListData();
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消保存
    taskcancel() {
      this.$confirm('任务还未发起，是否确认取消', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.dialogaddtask = false;
      });
    },
    handleClose() {
      this.$confirm('任务还未发起，是否确认取消', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.dialogaddtask = false;
      });
    },
    getTree() {
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.getTreedata(ts.d.data.operation1);
          console.log(ts.d.data.operation1, 'ts.d.data.operation1');
        }
      });
    },
    getTreedata(data) {
      const arr = data;
      const arr1 = arr.map(item => item.hash);
      const date = [];
      const obj = {
        id: 987654321,
        label: '全部',
        children: [],
      };
      arr1.forEach((item) => {
        if (!date.includes(item.orgname)) {
          date.push(item.orgname);
        }
      });
      const ars = [];
      date.forEach((item, ind) => {
        ars.push({
          id: ind,
          label: item,
          children: [],
        });
      });
      arr1.forEach((item) => {
        ars.forEach((file) => {
          if (file.label === item.orgname) {
            file.children.push({
              id: item.pid,
              label: item.username,
            });
          }
        });
      });
      obj.children = ars;
      this.arr.push(obj);
    },
    sendliuyan() {
      const req = {
        handle:
          '1FA998754EC78E7D4E95A8D2219E38CB66B035E3B6AFA77ABFF0B9210751F692',
        taskid: this.xiangqlist.taskid,
        context: this.textarea,
        touserid: this.name,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          const req = {
            handle: '1FA998754EC78E7DD6F3513F0FEA536DCB307DE5BC55A6BB',
            taskid: this.xiangqlist.taskid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.liuyanlist = ts.d.data.operation4.reverse();
              this.textarea = '';
              this.name = '';
            }
          });
        }
      });
    },
    pickerchange1() {
      this.$nextTick(() => {
        if (this.starttime == null) {
          this.starttime = [];
        }
      });
    },
    pickerchange2() {
      this.$nextTick(() => {
        if (this.finishtime == null) {
          this.finishtime = [];
        }
      });
    },
  },
};
</script>
<style scoped>
.collect {
  border: 1px solid #c0c4cc;
  margin: 20px 0;
  padding: 20px 50px;
  display: flex;
}
.collect .left {
  width: 60%;
}
.collect .left .title {
  font-size: 18px;
  font-weight: bold;
}
.collect .left p {
  margin: 12px 0;
}
.collect .left .p1 {
  margin: 20px 0;
}
.collect .right {
  width: 40%;
  text-align: right;
}
.collect .right .title {
  color: red;
}
.collect .right p {
  margin: 10px 0;
}
.content {
  padding: 0 50px;
}
.foot {
  text-align: right;
}
.xq_row p {
  margin: 10px 0;
}
.chatbox {
  padding: 50px;
  border: 1px solid #c0c4cc;
}
.chatbox .tr {
  text-align: right;
}
.chatbox .tc {
  text-align: center;
}
.chatbox .chat {
  border: 1px solid #c0c4cc;
  padding: 15px;
  margin: 10px 0;
  border-radius: 20px;
}
</style>
